<template>
  <div>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="image-label">图片类型</div>
      </el-col>
      <el-col :span="21">
        <el-select v-model="field.fieldValue.type" class="full-width" @change="changeType">
          <el-option v-for="item in CONST.IMAGE_TYPE" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="image-label">补充类型</div>
      </el-col>
      <el-col :span="21">
        <el-select v-model="field.fieldValue.additional" class="full-width">
          <el-option v-for="item in CONST.ADDITIONAL_TYPE" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="image-label">图片分类</div>
      </el-col>
      <el-col :span="21">
        <el-select v-model="field.fieldValue.classification" class="full-width">
          <el-option v-for="item in CONST.IMAGE_CLASSIFICATION" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="bottom-space" :hidden="hntFlag">
      <el-col :span="3">
        <div class="image-label">标题</div>
      </el-col>
      <el-col :span="21">
        <KindEditor :content.sync="field.fieldValue.title" editor-type="Input" width="100%"/>
      </el-col>
    </el-row>
    <el-row class="bottom-space" :hidden="hntFlag">
      <el-col :span="3">
        <div class="image-label">注释</div>
      </el-col>
      <el-col :span="21">
        <KindEditor :content.sync="field.fieldValue.comment" editor-type="Input" width="100%"/>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="image-label">图片</div>
      </el-col>
      <el-col :span="21">
        <div v-for="(path, index) in field.fieldValue.paths" :key="index" class="image-block line right-space"
             @mouseover="showCover(index)">
          <img :src="path" alt="" class="full-width full-height"/>
          <div :style="coverStyle[index]" class="image-label image-cover hover-display"
               @click="handleClickCover(fieldIndex, index)" @mouseleave="hideCover(index)">
            <div class="el-icon-delete image-icon" @click.stop="handleClickDelIcon(fieldIndex, index)"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-upload :before-upload="UTIL.beforeUpload"
                   :on-error="handleUploadError"
                   :on-success="handleUploadSuccess"
                   :action="'/pmph/action/file/uploadImg?uploadPath=' + uploadPath"
                   multiple
                   :show-file-list=false>
          <el-button size="small" style="width: 180px;" type="primary">上传图片</el-button>
        </el-upload>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'KImgField',
  props: {
    field: {},
    fieldIndex: 0,
    uploadPath: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      hntFlag: false,
      coverStyle: []
    }
  },
  watch: {
    hntFlag(nVal, oVal){
      if (nVal){
        this.field.fieldValue.title = ''
        this.field.fieldValue.comment = ''
      }
    }
  },
  methods: {
    changeType(){
      this.hntFlag = this.field.fieldValue.type == 'rw_img hnt'
    },
    handleClickCover(fieldIndex, imgIndex) {
      this.$emit("clickImg", fieldIndex, imgIndex)
    },
    handleClickDelIcon(fieldIndex, imgIndex) {
      this.$emit("del", fieldIndex, imgIndex)
    },
    showCover(index) {
      this.coverStyle.splice(index, 1, 'display: block;')
    },
    hideCover(index) {
      this.coverStyle.splice(index, 1, 'display: none;')
    },
    handleUploadSuccess(response) {
      this.$emit("upload", this.fieldIndex, response.path)
    },
    handleUploadError(err, file, fileList) {
      this.$message.error("图片上传失败")
      console.error("图片上传失败")
      console.error(err)
      console.error(file)
      console.error(fileList)
    }
  },
  created() {
    for (let str in this.field.fieldValue.paths) {
      this.coverStyle.push('display: none;')
    }
    if (!this.field.fieldValue.type){
      this.field.fieldValue.type = 'rw_img default'
    }
    this.changeType()
  }
}
</script>

<style scoped>
.line {
  display: inline-block;
}

.image-label {
  height: 40px;
  line-height: 40px;
  text-align: right;
  margin-right: 10px;
}

.image-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  cursor: pointer;
}

.image-cover {
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  width: 64px;
  height: 64px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

.bottom-space {
  margin-bottom: 10px;
}

.right-space {
  margin-right: 10px;
}

.image-block {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  position: relative;
}
</style>
